<template>
  <div
    class="category"
    style="margin-top: 45px"
  >
  <div class="left">
    <van-sidebar v-model="activeKey">
      <van-sidebar-item
        v-for="item in list"
        :key="item" @click="$router.push(`/phoneList/${item}`)"
        :title="item"
      />
    </van-sidebar>
  </div>
  <div class="right">
    <router-view></router-view>
  </div>
    

  </div>
</template>

<script>
// 引入api/goods模块请求
import { categoryList } from '@/api/goods';
// 进行暴露
export default {
  data() {
    return {
      list: [],
      activeKey: 0,
    };
  },
  methods: {
    async categoryList() {
      // 调用categoryList方法 拿到api/goods里面的数据
      const res = await categoryList();
      // 接收api/goods里面的data数据
      this.list = res.data.data;
    },
  },
  //
  created() {
    this.categoryList();
  },
};
</script>

<style lang="scss" scoped>
.category{
  display:flex;
  .left{
    flex:1;
  }
  .right{
    flex:9;
    background: skyblue;
  }
}
</style>
